<template>
  <div class="not-fount-wrapper">
    <div class="not-found-img">
      <div aspectratio w-507-278 class="img-wrap">
        <img aspectratio-content src="@/assets/404_images/404.png" alt="">
      </div>
    </div>
    <div class="btn">
      <button @click="handleHome">返回首页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    handleHome () {
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'
.not-fount-wrapper
  initPosition()
  background-color $common_bgc
  display flex
  flex-direction column
  justify-content center
  align-items center
  box-sizing border-box
  .not-found-img
    width 507px
    margin-bottom 50px
  .btn
    width 500px
    text-align center
    button
      background-color $primary
      display flex
      justify-content center
      align-items center
      color $btn_font_color
      width 100%
      height 70px
      border-radius 35px
      font-size $btn_size
      border none
</style>
